<template>
  <div class="details">
    <div class="details-head">
      <div>
        <el-button type="text" icon="el-icon-arrow-left" style="color: ghostwhite; font-size: 16px"
                   @click="goBack"></el-button>
        <span class="title" style="color: ghostwhite; font-size: 14px">详情</span>
      </div>
      <div class="right">
        <el-button type="text" icon="el-icon-more"></el-button>
        <el-button type="text" icon="el-icon-s-help"></el-button>
      </div>
    </div>
    <div class="details-body">
      <div class="details-body-head">
        <div class="left">
          <img :src="subletHouse.photo">
          <span class="l">{{ subletHouse.nickname }}</span><br>
          <span class="r">发布于 {{ subletHouse.createTime }}</span>
        </div>
        <div class="right">
          <el-button class="yan" type="text" icon="el-icon-view"></el-button>
          <span class="l">次浏览{{ subletHouse.viewCount }}次</span>
        </div>
      </div>
      <div class="details-body-body">
        <el-carousel :interval="4000"  height="200px">
          <el-carousel-item v-for="item in subletHouse.imagesUrl" :key="item">
              <el-image style="height: 190px;" :src="item" class="medium"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="details-body-foot">
        <span>{{ subletHouse.title }}</span>
        <span class="r">/</span>
        <span class="l">{{ subletHouse.location }}</span>
      </div>
      <br>
      <div class="details-body-di">
        <div class="wen">
          <div class="aaa">
            <el-button type="text" icon="el-icon-user"></el-button>
            <span>租金：</span><span class="r">￥{{ subletHouse.rent }}/月</span> <span
              class="r">{{ subletHouse.payType }}</span> <span
              class="r">可租{{ subletHouse.tenancyTerm }}个月</span>
          </div>
          <div class="tan">
            <div>
              <div class="left">
                <el-button type="text" icon="el-icon-s-home"></el-button>
                <span>户型：{{ subletHouse.structure }}</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-ice-cream-square"></el-button>
                <span>出租类型：合租</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-user"></el-button>
                <span>入住情况：{{ subletHouse.female }}女 {{subletHouse.male}}男</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-truck"></el-button>
                <span>地铁：{{ subletHouse.nearbyStation }}</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-location-information"></el-button>
                <span>小区：{{ subletHouse.location }}</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-edit-outline"></el-button>
                <span>合约到期时间：{{subletHouse.endTime}}</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-edit-outline"></el-button>
                <span>可入住时间：{{subletHouse.moveTime}}</span></div>
            </div>
            <div class="right">
              <img src="@/assets/bj.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="details-foot-a">
      <p class="l">房子居住情况与优点，希望租房的你能够喜欢</p>
      <p>{{ subletHouse.introduce }}</p>
    </div>
    <div class="details-foot-b">
      <p class="l">我希望来租房的你是这样的</p>
      <p>{{ subletHouse.renterRequire }}</p>
    </div>
    <div class="details-foot-b">
      <p class="l">介绍下我的情况，你会相信我说的话</p>
      <p>{{ subletHouse.landlord }}</p>
    </div>
    <div class="details-foot-b">
      <p class="l">在这些时间来看房我比较方便</p>
      <p>{{ subletHouse.visitingTime }}</p>
    </div>
    <div class="details-foot-b">
    </div>
    <div class="details-foot">
      <el-footer class="bottom-fixed-bar" height="50px">
        <div class="left">
            <el-button size="mini" type="text" :icon="star" @click="collect" style="color: #f4a881;">收藏</el-button>
            <el-button size="mini" type="text" icon="el-icon-share" style="color: #f4a881;">分享</el-button>
            <el-button size="mini" type="text" icon="el-icon-warning" @click="accusation" style="color: #f4a881;">举报({{subletHouse.accusation}})</el-button>
        </div>
        <div style="float: right">
          <el-button size="mini" type="warning" plain @click="getContactPhone">电话联系TA</el-button>
          <el-button size="mini" type="warning" plain @click="getContactWechat">获取微信</el-button>
        </div>

      </el-footer>
    </div>
  </div>
</template>

<script>
const api = 'http://localhost:9701/web/house/'
export default {
  data() {
    return {
      subletHouse: {},
      star: ''
    }
  },
  methods: {
    accusation() {
      this.axios.get(api + 'accusation/' + this.subletHouse.id).then(res => {
        if (res.data.code === 200) {
          this.$message.success("举报成功")
          this.subletHouse.accusation = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    getContactPhone() {
      this.axios.get(api + 'getContactPhone/' + this.subletHouse.id).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            message: '电话为：' + response.data.data,
            type:'success'
          })
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    getContactWechat() {
      this.axios.get(api + 'getContactWechat/' + this.subletHouse.id).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '微信为：' + res.data.data,
            type: 'success'
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    collect() {
      if (this.star === 'el-icon-star-off') {
        this.axios.get(api + 'collect/' + this.subletHouse.id).then(res => {
          if (res.data.code === 200) {
            this.$message.success("收藏成功")
            this.star = 'el-icon-star-on'
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.axios.delete(api + 'collect/' + this.subletHouse.id).then(res => {
          if (res.data.code === 200) {
            this.$message.success("取消收藏")
            this.star = 'el-icon-star-off'
          } else {
            this.$message.error(res.data.message)
          }
        })
      }

    },
    goBack() {
      this.$router.go(-1)
    },
    initInfo() {
      if (this.$route.query.id) {
        this.axios.get(api + this.$route.query.id).then(res => {
          if (res.data.code === 200) {
            this.subletHouse = res.data.data
            this.subletHouse.imagesUrl = res.data.data.imagesUrl.split(',')
            console.log(this.subletHouse.isCollected)
            if (this.subletHouse.isCollected === 1) {
              this.star = 'el-icon-star-on'
            } else {
              this.star = 'el-icon-star-off'
            }
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    }
  },
  created() {
    this.initInfo()
  }
}
</script>

<style scoped>
.bottom-fixed-bar .left {
  width: 127px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.details-foot-a .l {
  font-weight: bold;
  color: orange;
  font-size: 16px;
}

.details-foot-a {
  font-weight: bold;
  border-top: 1px dashed #8a8a8a;
  text-align: left;
}

.details-foot-b {
  border-top: 1px dashed #8a8a8a;
  text-align: left;
  margin-bottom: 100px;
  font-weight: bold;
}

.details-foot-b .l {
  font-weight: bold;
  color: orange;
  font-size: 16px;
}

.bottom-fixed-bar {
  position: fixed;
  bottom: 0;
  width: 390px;
  background-color: white;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 11px 7px;
}

.tan {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.details-body-di .wen img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 40px;
}

.details-body-di .wen .left {
  width: 250px;
}

.details-body-di .wen .r {
  color: red;
  margin-right: 20px;
}

.details-body-di .wen {
  text-align: left;
}

.details-body-foot {
  text-align: left;
}

.details-body-foot .r {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
}

.details-body-foot .l {
  font-size: 10px;
  color: #c0bebe;
}

.el-carousel__item el-image {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.right .l {
  font-size: 10px;
}

.details-body .right {
  margin-top: 20px;
}

.left .l {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  float: left;
  margin-top: 10px;
  margin-left: 18px;
}

.left .r {
  font-size: 11px;
  color: #c0bebe;
  float: left;
  margin-left: 74px;
  margin-top: -12px;
}

.left img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-left: 15px;
}

.left {
  float: left;
}

.right {
  float: right;
  margin-right: 10px;
}

.right .yan {
  color: #F4A780;
}

.details-body-head {
  margin-top: 10px;
  height: 60px;
}

.title {
  margin-left: 5px;
}

.details-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  background-color: #f4a881;
}

.details {
  width: 390px;
  height: 100vh;
  border: 1px solid ghostwhite;
  margin: 0 auto;
}

.right {
  display: flex;
  border: 1px solid ghostwhite;
  padding: 5px 5px;
  border-radius: 15px;
  margin-right: 10px;
}

.right button {
  color: ghostwhite;
  padding: 0 5px;
  font-size: 18px;
}
</style>